﻿@charset 'UTF-8';
body {
    background:url(/images/bg.jpg);
     background-size:cover;
     background-color: rgba(218,255,132,0.7)
     
}
#contenthost {
    height: 100%;
    width: 100%;
    background: rgba(0,51,51,0.7);
    animation: myfirst 5s linear 2s infinite alternate;
}

@keyframes myfirst
{
from { background: rgba(0,51,51,0.7)}
to { background: rgba(51,102,0,0.7)}
}
@keyframes bgZoom
{
from { background-size: 100%;}
to { background-size: 50%;}
}

.hearder-command {
   position:absolute;
   top:30px;
   right:40px;
}
.hearder-command p{
    display:-ms-grid;
    -ms-grid-rows:40px 20px; 

}
    .hearder-command p span {
        display: inline-block;
       -ms-grid-row:1;
       width:40px;
       height:40px;
       line-height:40px;
    border-radius: 50%;
    border-width: 2px;
    border-style: solid;
    text-align:center;
    vertical-align: baseline;
    }
        .hearder-command p:hover span {
            background-color: rgba(255, 255, 255, 0.13);
        }
        .hearder-command p#searchIco span:before {
            content:"\e11a";
            font-family:'Segoe UI Symbol';
           font-size:16pt;
 
        }
    .hearder-command p label {
       -ms-grid-row:2;
       display:block;
       margin-top:10px;
       text-align:center;
    }

.fragment {
    /* 定义包含横幅和正文的行的网格*/
    -ms-grid-columns: 1fr;
    -ms-grid-rows:138px 1fr;
    display: -ms-grid;
    height: 100%;
    width: 100%;
}

    .fragment header[role=banner] {
        /* 定义包含后退按钮和页标题的列的网格。*/
        -ms-grid-columns: 39px 81px 1fr;
        -ms-grid-rows: 1fr;
        display: -ms-grid;
        /* background: rgba(0,0,0,0.4)*/
    }

        .fragment header[role=banner] .win-backbutton {
            -ms-grid-column: 2;
            margin-top: 59px;
        }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 3;
            margin-top: 37px;
        }

            .fragment header[role=banner] .titlearea .pagetitle {
                width: calc(100% - 20px);
                
            }
                .fragment header[role=banner] .titlearea .pagetitle img {
                    vertical-align:middle;
                    margin-right:20px;
                  
                }

    .fragment section[role=main] {
        -ms-grid-row: 2;
    overflow-x: auto;
    overflow-y: hidden;
    width:100%;
    height:100%;
    }

.loading {
    left:calc(50% - 60px);
    top:30%;
    position: absolute;
    z-index:1000;
}
.homeLoading {
    left:45%;
    top:49%;
    position: absolute;
    z-index:1000;
}
    .loading .progressRingText,
    .homeLoading .progressRingText {
        font-size:12pt;
         letter-spacing:5px;
        
    }
        .loading .progressRingText progress,
        .homeLoading .progressRingText progress  {
            color:white;
            vertical-align: middle;
           
        }
progress.withText {
    color: inherit; /* Uses the same text color as the page */
    vertical-align: text-bottom; /* Makes the bottom of the control align with the bottom of its label */
}


    /* The margin to separate the ring and its label */
    .progressRingText progress {
        margin-right: 10px;
    }


.hide {
    display:none;
}
.show {
    display:block;
}
@media screen and (-ms-view-state: snapped) {
    .fragment header[role=banner] {
        -ms-grid-columns: auto 1fr;
        margin-left: 15px;
        margin-right: 15px;
    }

        .fragment header[role=banner] .win-backbutton {
            -ms-grid-column: 1;
            margin-bottom: 0;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 76px;
        }

            .fragment header[role=banner] .win-backbutton:disabled {
                display: none;
            }

        .fragment header[role=banner] .titlearea {
            -ms-grid-column: 2;
            margin-bottom: 0;
            margin-left: 5px;
            margin-right: 5px;
            margin-top: 68px;
        }

}

@media screen and (-ms-view-state: fullscreen-portrait) {
    .fragment header[role=banner] {
        -ms-grid-columns: 29px 71px 1fr;
    }
}
